<template>
  <div>
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      :form="form"
      :xLength="1500"
      :defaultSelectedRowKeys="chosenIds"
      :rowSelectionSelect="rowSelectionSelect"
      :rowSelectionChange="rowSelectionChange"
      :rowSelectInvert="rowSelectInvert"
      @initChosenIds="initChosenIds"
      :defaultParams="defaultParams"
    >
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="海报主图名称">
            <a-input
              style="width: 200px"
              v-decorator="['name']"
              placeholder="请输入海报主图名称"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="分类">
            <a-select
              placeholder="选择海报一级分类"
              style="width: 160px"
              :options="firstOptions"
              v-decorator="['firstPosterCategoryId']"
              @change="firstOptionsChange"
            >
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-select
              placeholder="选择海报二级分类"
              style="width: 160px"
              v-decorator="['secondPosterCategoryId']"
              :options="secondOptions"
            >
            </a-select>
          </a-form-item>
        </a-form>
      </template>
      <template slot="oprationRow">
        <a-button type="primary" icon="plus" @click="addPicture"
          >新建主图</a-button
        >
        <a-button type="danger" @click="allDel">批量删除</a-button>
      </template>
      <template slot="tableOperation" slot-scope="{ record }">
        <a-space>
          <a
            href="javascript:;"
            class="text-primary pointer"
            @click="preview(record.id)"
            >预览</a
          >
          <a
            href="javascript:;"
            class="text-primary pointer"
            @click="edit(record.id, record.firstPosterCategoryName)"
          >
            编辑
          </a>
          <a
            href="javascript:;"
            class="text-primary pointer"
            @click="delRow([record.id])"
          >
            删除
          </a>
        </a-space>
      </template>
    </search-table>
    <addPoster
      :addVisible="addVisible"
      :firstName="firstName"
      :editRowId="editRowId"
      @confirm="refresh"
      @cancel="closeModal"
    ></addPoster>
  </div>
</template>
<script>
import addPoster from "./components/picture/addPosterPictureModal.vue";
export default {
  components: {
    addPoster,
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: "table_search" }),
      url: "goldenhome/gh/poster_admin/poster/page",
      columns: [
        {
          title: "主图缩略图",
          dataIndex: "imgsUrl",
          key: "imgsUrl",
          align: "center",
          customRender: (text, row) => {
            return (
              <table-img ref={row.id} src={text} width="160" height="160" />
            );
          },
        },
        {
          title: "主图名称",
          dataIndex: "name",
          key: "name",
          align: "center",
        },
        {
          title: "主图一级分类",
          dataIndex: "firstPosterCategoryName",
          key: "firstPosterCategoryName",
          align: "center",
        },
        {
          title: "主图二级分类",
          dataIndex: "secondPosterCategoryName",
          key: "secondPosterCategoryName",
          align: "center",
        },
        {
          title: "主图排序",
          dataIndex: "sort",
          key: "sort",
          align: "center",
        },
        {
          title: "创建时间",
          dataIndex: "createDate",
          key: "createDate",
          align: "center",
        },
        {
          title: "最后编辑时间",
          dataIndex: "updateDate",
          key: "updateDate",
          align: "center",
        },
        {
          title: "创建人",
          dataIndex: "userName",
          key: "userName",
          align: "center",
        },
        {
          title: "创建账号",
          dataIndex: "userPhone",
          key: "userPhone",
          align: "center",
          width: 150,
        },
        {
          title: "所属机构",
          dataIndex: "orgName",
          key: "orgName",
          align: "center",
        },
        {
          title: "所属店铺",
          dataIndex: "shopName",
          key: "shopName",
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "operation",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      chosenIds: [], // 不同分页下被选中的表格行id集合
      allSelectedRows: [], // 不同分页下被选中的表格行
      addVisible: false,
      firstOptions: [],
      secondOptions: [],
      secondCategoryInfo: {},
      defaultParams: {
        source: 2,
      },
      editRowId: "",
      firstName: "",
    };
  },
  mounted() {
    this.getPosterCategoryList();
  },
  methods: {
    // 一级分类改变
    firstOptionsChange(value) {
      this.form.resetFields("secondPosterCategoryId");
      if (
        !this.secondCategoryInfo[value] ||
        this.secondCategoryInfo[value].length == 0
      ) {
        // 没有二级分类 把二级分类下拉选项数组置空
        this.secondOptions = [];
        return;
      }
      this.secondOptions = this.secondCategoryInfo[value].map((item) => {
        // 获取当前选择一级分类下二级分类
        return {
          label: item.name,
          value: item.id,
        };
      });
    },
    // 查询分类数据
    async getPosterCategoryList() {
      const res = await this.$get(
        "goldenhome/gh/poster_admin/poster/category/list",
        {
          source: 2,
        }
      );
      if (res && res.returnCode == 1000) {
        this.firstOptions = res.dataInfo.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
        res.dataInfo.forEach((item) => {
          this.secondCategoryInfo[item.id] = item.children;
        });
      }
    },
    // 清空已选中
    initChosenIds() {
      this.chosenIds = [];
      this.allSelectedRows = [];
    },
    // 表格单行选择
    rowSelectionSelect(record, selected) {
      if (!selected) {
        this.allSelectedRows.splice(
          this.allSelectedRows.findIndex((item) => item.id == record.id),
          1
        );
        this.chosenIds.splice(
          this.chosenIds.findIndex((item) => item == record.id),
          1
        );
      }
    },
    // 表格任意行发生选择或取消选择时回调
    rowSelectionChange(selectedRowKeys, selectedRows) {
      let _this = this;
      if (selectedRows.length > 0) {
        selectedRows.forEach((item) => {
          if (!_this.chosenIds.includes(item.id)) {
            _this.chosenIds.push(item.id);
            _this.allSelectedRows.push(item);
          }
        });
        selectedRowKeys = this.chosenIds;
        this.$refs.searchtable.selectedRowKeys = this.chosenIds;
      } else {
      }
    },
    rowSelectInvert(selected, selectedRows, changeRows) {
      if (!selected) {
        let ids = [];
        changeRows.forEach((item) => {
          ids.push(item.id);
        });
        this.chosenIds = this.chosenIds.filter(function (val) {
          return ids.indexOf(val) === -1;
        });
        let arr = [];
        this.allSelectedRows.forEach((item) => {
          if (this.chosenIds.includes(item.id)) {
            arr.push(item);
          }
        });
        this.allSelectedRows = arr;
      }
    },
    // 预览
    preview(id) {
      this.$refs[id].preview();
    },
    // 编辑
    edit(id, name) {
      this.editRowId = id;
      this.addVisible = true;
      this.firstName = name;
    },
    allDel() {
      if (this.chosenIds?.length > 0) {
        this.delRow(this.chosenIds);
      } else {
        this.$message.warning("请至少选择一条主图");
      }
    },
    // 删除
    delRow(id) {
      this.$confirm({
        title: "删除提示",
        content: "删除后不可恢复,确认删除",
        onOk: async () => {
          await this.$post("goldenhome/gh/poster_admin/poster/delete", [...id]);
          this.refresh();
        },
      });
    },
    // 刷新
    refresh() {
      this.$refs.searchtable.refreshTable();
    },
    closeModal() {
      this.addVisible = false;
    },
    addPicture() {
      this.editRowId = "";
      this.addVisible = true;
    },
  },
};
</script>
<style lang="less" scoped>
</style>
